<!--  -->
<template>
  <div class="birthland-top">

    <div
      class="birthland-all"
      v-for="item in birthlandTopData"
      :key="item.id"
      @click="clickBirthland(item)">

      <img :src="item.img" alt="">
    </div>

  </div>
</template>

<script>

export default {
  props: {
    birthlandTopData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {}
  },
  components: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {
    clickBirthland (item) {
      this.$emit('clickBirthland', item)
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.birthland-top {
  display flex
  justify-content space-around
  margin 0 240px
}
.birthland-all {
  display flex
  flex-direction column
  align-items center
  img {
    width 400px
    height 140px
    margin-bottom 10px
    &:nth-child(1) {
      margin 0 10px
    }
  }
}
</style>
